<template>
  <div id="timingtask_manage" class="container">
    <div class="content">
      <!-- <div class="title">定时任务管理</div> -->
      <div class="panel">
        <div class="condition">
          <div class="row_one">
            <el-input
              style="width: 2rem;"
              placeholder="搜索 bean名称"
              suffix-icon="el-icon-search"
              v-model="searchText"
              @input="searchtimingTask()"
              class="input_search"
            ></el-input>
            <!-- <el-button class="btn_add" style="margin-left:0.2rem;" type="text" @click="addCofim()">新增</el-button>
            <el-button :disabled="isShow" class="btn_update" type="text" @click="handleDelete({},true)">批量删除</el-button>
            <el-button :disabled="isShow" class="btn_update" type="text" @click="handlePause({},true)">批量暂停</el-button>
            <el-button :disabled="isShow" class="btn_update" type="text" @click="handleResume({},true)">批量恢复</el-button> -->
            <!-- <el-button :disabled="isShow" class="btn_update" type="text" @click="handleRun({},true)">批量立即执行</el-button> -->
            <el-button class="btn_loglist" type="text" @click="handleLog()">日志列表</el-button>

             <el-button class="btn_add" type="text" @click="handleSync()">时间同步</el-button>
          </div>
        </div>

        <div>
          <el-table
            ref="classTimeTable"
            :data="timingTaskList"
            stripe
            style="width: 100%;color:666666;"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" align="center" width="55"></el-table-column>
            <el-table-column type="index" label="ID" align="center" width="50"></el-table-column>
            <el-table-column prop="beanName" align="center" label="bean名称" width="150"></el-table-column>
            <el-table-column prop="params" align="center" label="参数" width="150"></el-table-column>
            <el-table-column prop="cronExpression" align="center" label="cron表达式" width="350"></el-table-column>
            <el-table-column prop="remark" align="center" label="备注" width="200"></el-table-column>
            <el-table-column align="center" label="状态" width="100">
              <template slot-scope="scope">{{ scope.row.status == 0?"正常":"暂停" }}</template>
            </el-table-column>
            <el-table-column prop="operate" align="center" column-key="btn" label="操作">
              <template slot-scope="scope">
                <!-- <el-button
                  class="btn_editor"
                  type="text"
                  @click="handleEdit(scope.row)"
                  style="color:#409EFF;border: 0;background: none;"
                >编辑</el-button>
                <el-button
                  class="btn_editor"
                  type="text"
                  @click="handleDelete(scope.row,false)"
                  style="color:#409EFF;border: 0;background: none;"
                >删除</el-button>
                <el-button
                  class="btn_editor"
                  type="text"
                  @click="handlePause(scope.row,false)"
                  style="color:#409EFF;border: 0;background: none;"
                >暂停</el-button>
                <el-button
                  class="btn_editor"
                  type="text"
                  @click="handleResume(scope.row,false)"
                  style="color:#409EFF;border: 0;background: none;"
                >恢复</el-button> -->
                <el-button
                  class="btn_editor"
                  type="text"
                  @click="handleRun( scope.row,false)"
                  style="color:#409EFF;border: 0;background: none;"
                >立即执行</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          class="page"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="tabledisplayObj.currentPage"
          @size-change="pageSizeChange"
          @current-change="tabledisplayChangePage"
          :total="tabledisplayObj.total"
        ></el-pagination>
      </div>
    </div>
    <createTimingTask ref="createTimingTask" @callback="closeAdd"></createTimingTask>
    <timeSync ref="timeSync" @callback="closeSync"></timeSync>
    <timgingLog ref="timgingLog"></timgingLog>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex"; //先要引入
import createTimingTask from "./common/createTimingTask";
import timgingLog from "./common/timgingLog";
import timeSync from "./common/time_sync";
let vm;
let user;
export default {
  data() {
    return {
      searchText: "", //搜索框输入文本
      isShow:true,
      tabledisplayObj: {
        beanName: "",
        currPage: 1,
        pageSize: 10,
        total: 0
      },
      isShowSearch: false,
      timingTaskList: [],
      selectJobIds: []
    };
  },
  components: {
    createTimingTask,timgingLog,timeSync
  },
  methods: {
    handleSync(){
      vm.$refs.timeSync.init();
    },
    closeSync(data){

    },
    handleSelectionChange(val) {
      console.log(val);
      vm.isShow = val.length == 0;
      vm.selectJobIds = [];
      val.forEach(item => {
        vm.selectJobIds.push(item.jobId);
      });
    },
    /**
     * 初始化数据
     */
    initData() {
      this.getData(this.tabledisplayObj);
    },
    /**
     * 抽取出来获取列表
     */
    getData(paras) {
      let timingTasktemp = []; //临时存放列表
      api.scheduleList(paras).then(function(data) {
        console.log(data);
        if (data.resultCode == 2000) {
          timingTasktemp = data.list;
          vm.tabledisplayObj.total = data.totalCount;
          vm.timingTaskList = timingTasktemp;
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    pageSizeChange: function(val) {
      this.tabledisplayObj.pageSize = val;
      this.initData();
    },
    /**表格显示形式翻页 */
    tabledisplayChangePage(val) {
      this.tabledisplayObj.currPage = val;
      this.initData();
    },
    closeAdd(data) {
      console.log(data);
      this.initData();
    },
    /**
     * 向数组中添加数据
     */
    addCofim() {
      vm.$refs.createTimingTask.init();
    },
    /**
     * 更新/编辑数据
     */
    handleEdit(row) {
      vm.$refs.createTimingTask.init(JSON.parse(JSON.stringify(row)));
    },
    /**
     * 查看日志
     */
    handleLog(){
      vm.$refs.timgingLog.init();
    },
    /**
     * 暂停
     */
    handlePause(row, isBatch) {
      let paras = {
        jobIds: !isBatch ? [row.jobId] : vm.selectJobIds
      };
      api.schedulePause(paras).then(function(data) {
        if (data.result == "操作成功") {
          vm.initData();
          vm.$message({
            message: "暂停成功",
            type: "success"
          });
        } else {
          vm.$message.error(data.result);
        }
      });
    },
    /**
     * 恢复
     */
    handleResume(row, isBatch) {
      let paras = {
        jobIds: !isBatch ? [row.jobId] : vm.selectJobIds
      };
      api.scheduleResume(paras).then(function(data) {
        if (data.result == "操作成功") {
          vm.initData();
          vm.$message({
            message: "恢复成功",
            type: "success"
          });
        } else {
          vm.$message.error(data.result);
        }
      });
    },
    /**
     * 立即执行
     */
    handleRun(row, isBatch) {
      let paras = {
        jobIds: !isBatch ? [row.jobId] : vm.selectJobIds
      };
      api.scheduleRun(paras).then(function(data) {
        if (data.result == "操作成功") {
          vm.initData();
          vm.$message({
            message: "执行成功",
            type: "success"
          });
        } else {
          vm.$message.error(data.result);
        }
      });
    },
    handleDelete(row, isBatch) {
      console.log(row);
      this.$confirm("此操作将删除定时任务, 是否继续?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          let paras = {
            jobIds: !isBatch ? [row.jobId] : vm.selectJobIds
          };
          api.scheduleDelete(paras).then(function(data) {
            if (data.result == "操作成功") {
              vm.initData();
              vm.$message({
                message: "删除成功",
                type: "success"
              });
            } else {
              vm.$message.error(data.result);
            }
          });
        })
        .catch(() => {});
    },
    /**
     * 搜索
     */
    searchtimingTask() {
      console.log(this.searchText);
       this.tabledisplayObj.beanName = this.searchText;
      this.initData();
    }
  },
  mounted() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
    this.initData();
  },
  computed: {}
};
</script>

<style lang="scss">
#timingtask_manage {
  .btn_add {
    color: #ffffff;
    background: #17b3a3;
    padding: 0.1rem 0.2rem;
  }
  .btn_add:hover {
    background: #1dcfbd;
  }
  .btn_update {
    color: #ffffff;
    background: #fab6b6;
    padding: 0.1rem 0.2rem;
  }
  .btn_update:hover {
    background: rgb(241, 146, 146);
  }
  .btn_loglist {
    color: #ffffff;
    background: #67c23a;
    padding: 0.1rem 0.2rem;
  }
  .btn_loglist:hover {
    background: rgb(83, 155, 47);
  }
  .el-input__inner {
    border-radius: 0.08rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.36rem;
    line-height: 0.36rem;
  }
  .el-input__icon {
    line-height: 0.36rem;
  }

  .input_search {
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }
  .el-table thead {
    color: #666666;
  }
}
</style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
.right_btn {
  background-image: url(../../assets/img/clue_manage/add_white.png);
  width: 1.54rem;
}
</style>